<template>
    <div>
        <div class="app-container">
            <div>
                <el-button type="primary" @click="add" style="margin-bottom: 20px">添加</el-button>
            </div>
            <el-table :data="list"
                      element-loading-text="Loading"
                      border
                      fit
                      highlight-current-row>
                <el-table-column property="name" label="文档名称"></el-table-column>
                <el-table-column property="pathKey" label="标识"></el-table-column>
                <el-table-column property="mockUrl" label="mock地址" show-overflow-tooltip></el-table-column>
                <el-table-column property="apiUrl" label="api请求地址" show-overflow-tooltip></el-table-column>
                <el-table-column property="apiUrl" label="操作">
                    <template slot-scope="scope">
                        <el-button plain size="small" @click="edit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog title="文档相关信息" :visible.sync="dialogFormVisible">
                <el-form :model="apiDocPathForm" :rules="validation" ref="formName">
                    <el-form-item label="文档名称" prop="name" required>
                        <el-input v-model="apiDocPathForm.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="标识" prop="pathKey" required>
                        <el-input v-model="apiDocPathForm.pathKey" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="文档数据路径" prop="url" required>
                        <el-input v-model="apiDocPathForm.url" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="API请求地址" prop="apiUrl" required>
                        <el-input v-model="apiDocPathForm.apiUrl" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input
                                type="textarea"
                                placeholder="请输入内容"
                                v-model="apiDocPathForm.descr"
                                maxlength="300"
                                show-word-limit
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="详细说明" prop="md">
                        <v-md-editor v-model="apiDocPathForm.md" height="400px"></v-md-editor>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="sub">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </div>
</template>

<script lang="ts">
    import {Component, Prop, Provide, Ref} from 'vue-property-decorator'
    import {BaseMixins, Resource} from "csap-typescript-vue2/lib";
    import {ApidocPathController} from "@/api/controller/ApidocPathController";
    import {ApiDocPathForm, ApiDocPathList, ApiDocPathSearch} from "@/api/model/ApiDocPathModel";

    @Component
    export default class ApiDocComponent extends BaseMixins<ApidocPathController, ApiDocPathForm, ApiDocPathSearch, ApiDocPathList, number> {
        @Resource()
        apidocPathController: ApidocPathController;
        @Provide()
        apiDocPathForm: ApiDocPathForm = {};
        @Provide()
        listLoading: true;
        @Provide()
        initData: boolean = false;
        @Provide()
        dialogFormVisible: boolean = false;
        @Ref("formName")
        loginForm2: any;
        @Prop(Boolean)
        dialogVisible: boolean = false;
        @Provide()
        isAdd: boolean = true;

        mounted(): void {
            this.searchData.apidocId = this.$route.query.apidocId;
            this.getListPage();
        }

        getController(): ApidocPathController {
            return this.apidocPathController;
        }

        add() {
            this.apiDocPathForm = {};
            this.isAdd = true;
            this.dialogFormVisible = true;
        }


        edit(data: ApiDocPathList) {
            this.apiDocPathForm = data;
            this.dialogFormVisible = true;
            this.isAdd = false;
        }

        //刷新文档
        flushDoc(id: number) {
            this.getController().flushDoc(id).then(i => {
                this.$message({
                    message: '刷新文档成功',
                    type: 'success'
                });
            })
        }

        /**
         * 提交
         */
        sub() {
            this.loginForm2.validate(c => {
                if (!c) {
                    return;
                }
                this.apiDocPathForm.apidocId = this.searchData.apidocId;
                (this.isAdd ? this.getController().insert(this.apiDocPathForm) : this.getController().update(this.apiDocPathForm))
                    .then(res => this.getListPage())
                    .then(res => this.loginForm2.resetFields())
                    .then(res => this.dialogFormVisible = false);
            })
        }
    }
</script>
